// 等待文档加载完成
document.addEventListener('DOMContentLoaded', function() {
    // 为导航链接添加平滑滚动效果
    document.querySelectorAll('nav a').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('href').substring(1);
            const targetElement = document.getElementById(targetId);
            if (targetElement) {
                targetElement.scrollIntoView({
                    behavior: 'smooth'
                });
            }
        });
    });

    // 添加简单的页面加载动画
    document.body.style.opacity = 0;
    setTimeout(() => {
        document.body.style.transition = 'opacity 0.5s';
        document.body.style.opacity = 1;
    }, 100);
});

// 获取canvas元素和上下文
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 设置canvas大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 圣诞树的属性
let rotation = 0;
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const treeHeight = 200;
const treeWidth = 150;
const rotationSpeed = 0.02;

// 装饰球数组
const ornaments = [];

// 初始化装饰球
function initOrnaments() {
    for(let i = 0; i < 20; i++) {
        const angle = (i / 20) * Math.PI * 2;
        const radius = Math.random() * (treeWidth * 0.4) + (treeWidth * 0.1);
        
        ornaments.push({
            angle: angle,                        // 当前角度
            radius: radius,                      // 到圣诞树中心的距离
            y: (Math.random() - 0.5) * treeHeight, // 高度保持不变
            size: 5,                             // 装饰球大小
            hue: Math.random() * 360,            // 随机颜色
            glowOffset: Math.random() * Math.PI * 2,  // 闪烁相位
            glowSpeed: 2 + Math.random() * 2,    // 闪烁速度
            rotateSpeed: 0.2 + Math.random() * 0.3    // 旋转速度
        });
    }
}

// 更新装饰球位置
function updateOrnaments() {
    const currentTime = Date.now() / 1000;
    for(let ornament of ornaments) {
        // 更新角度，实现旋转
        ornament.angle += ornament.rotateSpeed * 0.02;
        // 计算新的位置
        ornament.x = Math.cos(ornament.angle) * ornament.radius;
        ornament.y = ornament.y;  // y保持不变
    }
}

// 雪花系统
const snowflakes = [];
const SNOWFLAKE_COUNT = 100;

// 初始化雪花
function initSnowflakes() {
    for (let i = 0; i < SNOWFLAKE_COUNT; i++) {
        snowflakes.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            radius: Math.random() * 3 + 1,
            speed: Math.random() * 2 + 1,
            wind: Math.random() * 0.5 - 0.25
        });
    }
}

// 更新雪花位置
function updateSnowflakes() {
    for (let flake of snowflakes) {
        flake.y += flake.speed;
        flake.x += flake.wind;

        // 如果雪花飘出画面，重置位置
        if (flake.y > canvas.height) {
            flake.y = -10;
            flake.x = Math.random() * canvas.width;
        }
        if (flake.x > canvas.width) {
            flake.x = 0;
        } else if (flake.x < 0) {
            flake.x = canvas.width;
        }
    }
}

// 绘制雪花
function drawSnowflakes() {
    ctx.save();
    ctx.fillStyle = 'white';
    for (let flake of snowflakes) {
        ctx.beginPath();
        ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2);
        ctx.fill();
    }
    ctx.restore();
}

// 绘制星星
function drawStar(x, y, radius, spikes = 5, outerRadius = radius * 2) {
    let rot = Math.PI / 2 * 3;
    let step = Math.PI / spikes;
    
    ctx.beginPath();
    ctx.moveTo(x, y - outerRadius);
    
    for (let i = 0; i < spikes; i++) {
        ctx.lineTo(x + Math.cos(rot) * outerRadius,
                  y + Math.sin(rot) * outerRadius);
        rot += step;

        ctx.lineTo(x + Math.cos(rot) * radius,
                  y + Math.sin(rot) * radius);
        rot += step;
    }
    
    ctx.lineTo(x, y - outerRadius);
    ctx.closePath();
}

// 绘制圣诞树
function drawTree() {
    // 清除canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // 绘制雪花
    drawSnowflakes();
    updateSnowflakes();
    
    // 更新装饰球位置
    updateOrnaments();
    
    // 保存当前状态
    ctx.save();
    
    // 移动到中心点并旋转
    ctx.translate(centerX, centerY);
    ctx.rotate(rotation);
    
    // 创建树的渐变色
    const treeGradient = ctx.createLinearGradient(-treeWidth/2, 0, treeWidth/2, 0);
    treeGradient.addColorStop(0, '#004d00');    // 深绿色阴影
    treeGradient.addColorStop(0.5, '#00cc00');  // 亮绿色
    treeGradient.addColorStop(1, '#004d00');    // 深绿色阴影

    // 绘制树冠（三角形）
    ctx.beginPath();
    ctx.moveTo(-treeWidth/2, treeHeight/2);
    ctx.lineTo(0, -treeHeight/2);
    ctx.lineTo(treeWidth/2, treeHeight/2);
    ctx.closePath();
    
    // 添加阴影
    ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
    ctx.shadowBlur = 15;
    ctx.shadowOffsetX = 5;
    ctx.shadowOffsetY = 5;
    
    ctx.fillStyle = treeGradient;
    ctx.fill();
    
    // 重置阴影
    ctx.shadowColor = 'transparent';
    
    // 绘制树干
    const trunkGradient = ctx.createLinearGradient(-20, 0, 20, 0);
    trunkGradient.addColorStop(0, '#4d2600');   // 深棕色
    trunkGradient.addColorStop(0.5, '#8B4513'); // 中棕色
    trunkGradient.addColorStop(1, '#4d2600');   // 深棕色
    
    ctx.fillStyle = trunkGradient;
    ctx.fillRect(-20, treeHeight/2, 40, 50);
    
    // 绘制金色星星
    ctx.save();
    ctx.translate(0, -treeHeight/2 - 20);
    drawStar(0, 0, 10, 5, 20);
    
    // 创建星星的渐变
    const starGradient = ctx.createRadialGradient(0, 0, 0, 0, 0, 20);
    starGradient.addColorStop(0, '#FFD700');    // 亮金色
    starGradient.addColorStop(1, '#DAA520');    // 暗金色
    
    ctx.fillStyle = starGradient;
    ctx.shadowColor = '#FFD700';
    ctx.shadowBlur = 15;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;
    ctx.fill();
    ctx.restore();
    
    // 绘制装饰球
    const currentTime = Date.now() / 1000;  // 当前时间（秒）
    for(let ornament of ornaments) {
        ctx.beginPath();
        ctx.arc(ornament.x, ornament.y, ornament.size, 0, Math.PI * 2);
        
        // 计算闪烁强度（0-1之间变化）
        const glow = (Math.sin(currentTime * ornament.glowSpeed + ornament.glowOffset) + 1) / 2;
        
        // 创建球的渐变
        const ballGradient = ctx.createRadialGradient(
            ornament.x - 2, ornament.y - 2, 0,
            ornament.x, ornament.y, ornament.size
        );
        
        // 使用glow值来调整颜色亮度
        const brightness = 40 + glow * 30; // 亮度在40-70之间变化
        ballGradient.addColorStop(0, `hsla(${ornament.hue}, 100%, ${brightness + 30}%, 1)`);   // 亮色
        ballGradient.addColorStop(1, `hsla(${ornament.hue}, 100%, ${brightness}%, 1)`);   // 暗色
        
        ctx.fillStyle = ballGradient;
        ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
        ctx.shadowBlur = 3;
        ctx.shadowOffsetX = 2;
        ctx.shadowOffsetY = 2;
        ctx.fill();
    }
    
    // 恢复状态
    ctx.restore();
}

// 动画循环
function animate() {
    requestAnimationFrame(animate);
    drawTree();
}

// 处理按钮点击和键盘事件
document.getElementById('rotateLeft').addEventListener('click', () => {
    rotation -= rotationSpeed;
});

document.getElementById('rotateRight').addEventListener('click', () => {
    rotation += rotationSpeed;
});

document.addEventListener('keydown', (event) => {
    if(event.key === 'ArrowLeft') {
        rotation -= rotationSpeed;
    } else if(event.key === 'ArrowRight') {
        rotation += rotationSpeed;
    }
});

// 处理窗口大小改变
window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});

// 初始化
initSnowflakes();
initOrnaments();

// 开始动画
animate();
